<template>
  <div class="container">
    <h1>组件使用演示</h1>
    <div>具体参数文档见readme</div>
    <hr>
    <div>选中的城市名称(Object choosedCity)：</div>
    <div style="color: #f16622;">{{choosedCity.name || '暂无选中城市'}}</div>
    <button class="my-btn" @click="isShowCityList = true">打开城市列表</button>
  <!-- 城市列表模块 -->
    <transition name="bottom">
      <city-list :city-list-raw="cityList"
                  :current-city-id="currentCityId"
                  @chooseCity="getChoosedCity"
                  v-if="isShowCityList && cityList.length"></city-list>
    </transition>
  </div>
</template>

<script>
import cityList from "../components/cityList.vue";
import cityListData from "../assets/libs/mockCityListData.js";
export default {
  data () {
    return {
      currentCityId: '',
      cityList: [],
      choosedCity: {},
      isShowCityList: false
    }
  },

  components: {
    cityList
  },

  created () {
    this.getCityListData()
  },

  methods: {
    getCityListData () {
      this.cityList = cityListData.data || []
    },
    getChoosedCity (choosedCity) {
      this.choosedCity = choosedCity
      this.isShowCityList = false
    },
  }
}
</script>


<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
  font-size: 16px;
  line-height: 2;
  padding: 30px 12px;
}
.my-btn {
  display: block;
  width: 100%;
  background: #f16622;
  color: #fff;
  padding: 18px;
  font-size: 16px;
}

/*过渡动画*/
.center-enter {
  opacity: 0;
}

.center-enter-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  opacity: 1;
}

.center-leave {
  opacity: 1;
}

.center-leave-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  opacity: 0;
}

.left-enter {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.left-enter-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.left-leave {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.left-leave-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.right-enter {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.right-enter-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.right-leave {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.right-leave-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.bottom-enter {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.bottom-enter-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.bottom-leave {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.bottom-leave-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.top-enter {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.top-enter-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.top-leave {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.top-leave-to {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
</style>
